Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: move HtmlContext #34482

Merged
merged 5 commits into from
Feb 17, 2022
Merged

refactor: move HtmlContext #34482

merged 5 commits into from
Feb 17, 2022

Conversation

balazsorban44
Copy link
Member

The shared utils file included an import from react (because it was using createContext) which seems to be unnecessary in the Middleware bundle.

With this PR and steps #34425 laid out, the bundle size did decrease without breaking functionality.

image

Fixes #34425

Bug

  • Related issues linked using fixes #number
  • Integration tests added
  • Errors have helpful link attached, see contributing.md

Feature

  • Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
  • Related issues linked using fixes #number
  • Integration tests added
  • Documentation added
  • Telemetry added. In case of a feature if it's used or not.
  • Errors have helpful link attached, see contributing.md

Documentation / Examples

  • Make sure the linting passes by running yarn lint

@balazsorban44 balazsorban44 changed the title chore: move HtmlContext refactor: move HtmlContext Feb 17, 2022
@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk
Copy link
Member

ijjk commented Feb 17, 2022

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js chore/move-html-context Change
buildDuration 16s 15.8s -226ms
buildDurationCached 6.2s 6.1s -49ms
nodeModulesSize 359 MB 359 MB ⚠️ +231 B
Page Load Tests Overall increase ✓
vercel/next.js canary vercel/next.js chore/move-html-context Change
/ failed reqs 0 0
/ total time (seconds) 3.221 3.233 ⚠️ +0.01
/ avg req/sec 776.19 773.24 ⚠️ -2.95
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.396 1.365 -0.03
/error-in-render avg req/sec 1791.28 1831.39 +40.11
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary vercel/next.js chore/move-html-context Change
450.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42 kB 42 kB
main-HASH.js gzip 27.9 kB 27.9 kB -34 B
webpack-HASH.js gzip 1.44 kB 1.44 kB
Overall change 71.6 kB 71.5 kB -34 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js chore/move-html-context Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js chore/move-html-context Change
_app-HASH.js gzip 1.36 kB 1.36 kB
_error-HASH.js gzip 194 B 194 B
amp-HASH.js gzip 312 B 312 B
css-HASH.js gzip 326 B 326 B
dynamic-HASH.js gzip 2.57 kB 2.57 kB
head-HASH.js gzip 350 B 350 B
hooks-HASH.js gzip 919 B 919 B
image-HASH.js gzip 5.05 kB 5.05 kB
index-HASH.js gzip 263 B 263 B
link-HASH.js gzip 2.26 kB 2.26 kB
routerDirect..HASH.js gzip 321 B 321 B
script-HASH.js gzip 383 B 383 B
withRouter-HASH.js gzip 318 B 318 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 14.7 kB 14.7 kB
Client Build Manifests
vercel/next.js canary vercel/next.js chore/move-html-context Change
_buildManifest.js gzip 460 B 460 B
Overall change 460 B 460 B
Rendered Page Sizes Overall increase ⚠️
vercel/next.js canary vercel/next.js chore/move-html-context Change
index.html gzip 531 B 532 B ⚠️ +1 B
link.html gzip 544 B 545 B ⚠️ +1 B
withRouter.html gzip 525 B 526 B ⚠️ +1 B
Overall change 1.6 kB 1.6 kB ⚠️ +3 B

Diffs

Diff for main-HASH.js
@@ -4264,6 +4264,7 @@
       var _routeMatcher = __webpack_require__(3888);
       var _routeRegex = __webpack_require__(4095);
       var _getMiddlewareRegex = __webpack_require__(9820);
+      var _formatUrl = __webpack_require__(4611);
       function _interopRequireDefault1(obj) {
         return obj && obj.__esModule
           ? obj
@@ -4440,7 +4441,7 @@
         var urlAsString =
           typeof href === "string"
             ? href
-            : (0, _utils).formatWithValidation(href);
+            : (0, _formatUrl).formatWithValidation(href);
         // repeated slashes and backslashes in the URL are considered
         // invalid and will never match a Next.js page/file
         var urlProtoMatch = urlAsString.match(/^[a-zA-Z]{1,}:\/\//);
@@ -4496,7 +4497,7 @@
               result = ref.result,
               params = ref.params;
             if (result) {
-              interpolatedAs = (0, _utils).formatWithValidation({
+              interpolatedAs = (0, _formatUrl).formatWithValidation({
                 pathname: result,
                 hash: finalUrl.hash,
                 query: omitParmsFromQuery(query, params)
@@ -4680,7 +4681,7 @@
                 query = _this.query;
               _this.changeState(
                 "replaceState",
-                (0, _utils).formatWithValidation({
+                (0, _formatUrl).formatWithValidation({
                   pathname: addBasePath(pathname),
                   query: query
                 }),
@@ -4800,7 +4801,7 @@
               options1._shouldResolveHref = as1 !== pathname2;
               this.changeState(
                 "replaceState",
-                (0, _utils).formatWithValidation({
+                (0, _formatUrl).formatWithValidation({
                   pathname: addBasePath(pathname2),
                   query: query1
                 }),
@@ -4977,7 +4978,9 @@
                               parsedAs.pathname = addBasePath(
                                 parsedAs.pathname
                               );
-                              as = (0, _utils).formatWithValidation(parsedAs);
+                              as = (0, _formatUrl).formatWithValidation(
+                                parsedAs
+                              );
                               url = addBasePath(
                                 (0, _normalizeLocalePath).normalizeLocalePath(
                                   hasBasePath(url) ? delBasePath(url) : url,
@@ -5170,7 +5173,9 @@
                               // allow the correct page chunk to be loaded
                               pathname = rewritesResult.resolvedHref;
                               parsed.pathname = addBasePath(pathname);
-                              url = (0, _utils).formatWithValidation(parsed);
+                              url = (0, _formatUrl).formatWithValidation(
+                                parsed
+                              );
                             }
                             _ctx.next = 70;
                             break;
@@ -5182,7 +5187,9 @@
                             if (parsed.pathname !== pathname) {
                               pathname = parsed.pathname;
                               parsed.pathname = addBasePath(pathname);
-                              url = (0, _utils).formatWithValidation(parsed);
+                              url = (0, _formatUrl).formatWithValidation(
+                                parsed
+                              );
                             }
                           }
                           case 70:
@@ -5250,7 +5257,9 @@
                               resolvedAs = effect.asPath;
                               pathname = effect.resolvedHref;
                               parsed.pathname = effect.resolvedHref;
-                              url = (0, _utils).formatWithValidation(parsed);
+                              url = (0, _formatUrl).formatWithValidation(
+                                parsed
+                              );
                             }
                             _ctx.next = 96;
                             break;
@@ -5366,7 +5375,7 @@
                             break;
                           case 111:
                             if (shouldInterpolate) {
-                              as = (0, _utils).formatWithValidation(
+                              as = (0, _formatUrl).formatWithValidation(
                                 Object.assign({}, parsedAs1, {
                                   pathname: interpolatedAs.result,
                                   query: omitParmsFromQuery(
@@ -5857,7 +5866,7 @@
                           case 17:
                             if (__N_SSG || __N_SSP || __N_RSC) {
                               dataHref = _this.pageLoader.getDataHref({
-                                href: (0, _utils).formatWithValidation({
+                                href: (0, _formatUrl).formatWithValidation({
                                   pathname: pathname,
                                   query: query
                                 }),
@@ -6097,7 +6106,7 @@
                             // allow the correct page chunk to be loaded
                             pathname = rewritesResult.resolvedHref;
                             parsed.pathname = pathname;
-                            url = (0, _utils).formatWithValidation(parsed);
+                            url = (0, _formatUrl).formatWithValidation(parsed);
                           }
                           _ctx.next = 23;
                           break;
@@ -6109,7 +6118,7 @@
                           if (parsed.pathname !== pathname) {
                             pathname = parsed.pathname;
                             parsed.pathname = pathname;
-                            url = (0, _utils).formatWithValidation(parsed);
+                            url = (0, _formatUrl).formatWithValidation(parsed);
                           }
                         }
                         case 23:
@@ -6140,7 +6149,7 @@
                               effects.parsedAs.query
                             );
                             resolvedAs = effects.asPath;
-                            url = (0, _utils).formatWithValidation(parsed);
+                            url = (0, _formatUrl).formatWithValidation(parsed);
                           }
                           route = (0,
                           _normalizeTrailingSlash).removePathTrailingSlash(
@@ -6572,6 +6581,8 @@
         value: true
       });
       exports.formatUrl = formatUrl;
+      exports.formatWithValidation = formatWithValidation;
+      exports.urlObjectKeys = void 0;
       var querystring = _interopRequireWildcard(__webpack_require__(466));
       function _interopRequireWildcard(obj) {
         if (obj && obj.__esModule) {
@@ -6641,6 +6652,26 @@
           .concat(pathname)
           .concat(search)
           .concat(hash);
+      }
+      var urlObjectKeys = [
+        "auth",
+        "hash",
+        "host",
+        "hostname",
+        "href",
+        "path",
+        "pathname",
+        "port",
+        "protocol",
+        "query",
+        "search",
+        "slashes"
+      ];
+      exports.urlObjectKeys = urlObjectKeys;
+      function formatWithValidation(url) {
+        if (false) {
+        }
+        return formatUrl(url);
       } //# sourceMappingURL=format-url.js.map
 
       /***/
@@ -7977,10 +8008,7 @@
       exports.isResSent = isResSent;
       exports.normalizeRepeatedSlashes = normalizeRepeatedSlashes;
       exports.loadGetInitialProps = loadGetInitialProps;
-      exports.formatWithValidation = formatWithValidation;
-      exports.HtmlContext = exports.ST = exports.SP = exports.urlObjectKeys = void 0;
-      var _react = __webpack_require__(7294);
-      var _formatUrl = __webpack_require__(4611);
+      exports.ST = exports.SP = void 0;
       function execOnce(fn) {
         var used = false;
         var result;
@@ -8115,26 +8143,6 @@
         );
         return _loadGetInitialProps.apply(this, arguments);
       }
-      var urlObjectKeys = [
-        "auth",
-        "hash",
-        "host",
-        "hostname",
-        "href",
-        "path",
-        "pathname",
-        "port",
-        "protocol",
-        "query",
-        "search",
-        "slashes"
-      ];
-      exports.urlObjectKeys = urlObjectKeys;
-      function formatWithValidation(url) {
-        if (false) {
-        }
-        return (0, _formatUrl).formatUrl(url);
-      }
       var SP = typeof performance !== "undefined";
       exports.SP = SP;
       var ST =
@@ -8151,11 +8159,7 @@
         }
         return DecodeError;
       })(_wrapNativeSuper(Error));
-      exports.DecodeError = DecodeError;
-      var HtmlContext = (0, _react).createContext(null);
-      exports.HtmlContext = HtmlContext;
-      if (false) {
-      } //# sourceMappingURL=utils.js.map
+      exports.DecodeError = DecodeError; //# sourceMappingURL=utils.js.map
 
       /***/
     },
Diff for index.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c5581a7a22133abc.js"
+      src="/_next/static/chunks/main-688a8db042e02e1b.js"
       defer=""
     ></script>
     <script
Diff for link.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c5581a7a22133abc.js"
+      src="/_next/static/chunks/main-688a8db042e02e1b.js"
       defer=""
     ></script>
     <script
Diff for withRouter.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c5581a7a22133abc.js"
+      src="/_next/static/chunks/main-688a8db042e02e1b.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js chore/move-html-context Change
buildDuration 19.3s 19.4s ⚠️ +86ms
buildDurationCached 6.2s 6.1s -73ms
nodeModulesSize 359 MB 359 MB ⚠️ +231 B
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js chore/move-html-context Change
/ failed reqs 0 0
/ total time (seconds) 3.257 3.216 -0.04
/ avg req/sec 767.67 777.3 +9.63
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.38 1.39 ⚠️ +0.01
/error-in-render avg req/sec 1812.03 1798.82 ⚠️ -13.21
Client Bundles (main, webpack, commons) Overall decrease ✓
vercel/next.js canary vercel/next.js chore/move-html-context Change
450.HASH.js gzip 179 B 179 B
framework-HASH.js gzip 42.1 kB 42.1 kB
main-HASH.js gzip 27.9 kB 27.9 kB -45 B
webpack-HASH.js gzip 1.44 kB 1.44 kB
Overall change 71.7 kB 71.7 kB -45 B
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js chore/move-html-context Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary vercel/next.js chore/move-html-context Change
_app-HASH.js gzip 1.35 kB 1.35 kB
_error-HASH.js gzip 180 B 180 B
amp-HASH.js gzip 305 B 305 B
css-HASH.js gzip 321 B 321 B
dynamic-HASH.js gzip 2.56 kB 2.56 kB
head-HASH.js gzip 342 B 342 B
hooks-HASH.js gzip 911 B 911 B
image-HASH.js gzip 5.08 kB 5.08 kB
index-HASH.js gzip 256 B 256 B
link-HASH.js gzip 2.28 kB 2.28 kB
routerDirect..HASH.js gzip 314 B 314 B
script-HASH.js gzip 375 B 375 B
withRouter-HASH.js gzip 309 B 309 B
85e02e95b279..7e3.css gzip 107 B 107 B
Overall change 14.7 kB 14.7 kB
Client Build Manifests
vercel/next.js canary vercel/next.js chore/move-html-context Change
_buildManifest.js gzip 459 B 459 B
Overall change 459 B 459 B
Rendered Page Sizes Overall decrease ✓
vercel/next.js canary vercel/next.js chore/move-html-context Change
index.html gzip 533 B 533 B
link.html gzip 548 B 547 B -1 B
withRouter.html gzip 528 B 527 B -1 B
Overall change 1.61 kB 1.61 kB -2 B

Diffs

Diff for main-HASH.js
@@ -4264,6 +4264,7 @@
       var _routeMatcher = __webpack_require__(3888);
       var _routeRegex = __webpack_require__(4095);
       var _getMiddlewareRegex = __webpack_require__(9820);
+      var _formatUrl = __webpack_require__(4611);
       function _interopRequireDefault1(obj) {
         return obj && obj.__esModule
           ? obj
@@ -4440,7 +4441,7 @@
         var urlAsString =
           typeof href === "string"
             ? href
-            : (0, _utils).formatWithValidation(href);
+            : (0, _formatUrl).formatWithValidation(href);
         // repeated slashes and backslashes in the URL are considered
         // invalid and will never match a Next.js page/file
         var urlProtoMatch = urlAsString.match(/^[a-zA-Z]{1,}:\/\//);
@@ -4496,7 +4497,7 @@
               result = ref.result,
               params = ref.params;
             if (result) {
-              interpolatedAs = (0, _utils).formatWithValidation({
+              interpolatedAs = (0, _formatUrl).formatWithValidation({
                 pathname: result,
                 hash: finalUrl.hash,
                 query: omitParmsFromQuery(query, params)
@@ -4680,7 +4681,7 @@
                 query = _this.query;
               _this.changeState(
                 "replaceState",
-                (0, _utils).formatWithValidation({
+                (0, _formatUrl).formatWithValidation({
                   pathname: addBasePath(pathname),
                   query: query
                 }),
@@ -4800,7 +4801,7 @@
               options1._shouldResolveHref = as1 !== pathname2;
               this.changeState(
                 "replaceState",
-                (0, _utils).formatWithValidation({
+                (0, _formatUrl).formatWithValidation({
                   pathname: addBasePath(pathname2),
                   query: query1
                 }),
@@ -4977,7 +4978,9 @@
                               parsedAs.pathname = addBasePath(
                                 parsedAs.pathname
                               );
-                              as = (0, _utils).formatWithValidation(parsedAs);
+                              as = (0, _formatUrl).formatWithValidation(
+                                parsedAs
+                              );
                               url = addBasePath(
                                 (0, _normalizeLocalePath).normalizeLocalePath(
                                   hasBasePath(url) ? delBasePath(url) : url,
@@ -5170,7 +5173,9 @@
                               // allow the correct page chunk to be loaded
                               pathname = rewritesResult.resolvedHref;
                               parsed.pathname = addBasePath(pathname);
-                              url = (0, _utils).formatWithValidation(parsed);
+                              url = (0, _formatUrl).formatWithValidation(
+                                parsed
+                              );
                             }
                             _ctx.next = 70;
                             break;
@@ -5182,7 +5187,9 @@
                             if (parsed.pathname !== pathname) {
                               pathname = parsed.pathname;
                               parsed.pathname = addBasePath(pathname);
-                              url = (0, _utils).formatWithValidation(parsed);
+                              url = (0, _formatUrl).formatWithValidation(
+                                parsed
+                              );
                             }
                           }
                           case 70:
@@ -5250,7 +5257,9 @@
                               resolvedAs = effect.asPath;
                               pathname = effect.resolvedHref;
                               parsed.pathname = effect.resolvedHref;
-                              url = (0, _utils).formatWithValidation(parsed);
+                              url = (0, _formatUrl).formatWithValidation(
+                                parsed
+                              );
                             }
                             _ctx.next = 96;
                             break;
@@ -5366,7 +5375,7 @@
                             break;
                           case 111:
                             if (shouldInterpolate) {
-                              as = (0, _utils).formatWithValidation(
+                              as = (0, _formatUrl).formatWithValidation(
                                 Object.assign({}, parsedAs1, {
                                   pathname: interpolatedAs.result,
                                   query: omitParmsFromQuery(
@@ -5857,7 +5866,7 @@
                           case 17:
                             if (__N_SSG || __N_SSP || __N_RSC) {
                               dataHref = _this.pageLoader.getDataHref({
-                                href: (0, _utils).formatWithValidation({
+                                href: (0, _formatUrl).formatWithValidation({
                                   pathname: pathname,
                                   query: query
                                 }),
@@ -6097,7 +6106,7 @@
                             // allow the correct page chunk to be loaded
                             pathname = rewritesResult.resolvedHref;
                             parsed.pathname = pathname;
-                            url = (0, _utils).formatWithValidation(parsed);
+                            url = (0, _formatUrl).formatWithValidation(parsed);
                           }
                           _ctx.next = 23;
                           break;
@@ -6109,7 +6118,7 @@
                           if (parsed.pathname !== pathname) {
                             pathname = parsed.pathname;
                             parsed.pathname = pathname;
-                            url = (0, _utils).formatWithValidation(parsed);
+                            url = (0, _formatUrl).formatWithValidation(parsed);
                           }
                         }
                         case 23:
@@ -6140,7 +6149,7 @@
                               effects.parsedAs.query
                             );
                             resolvedAs = effects.asPath;
-                            url = (0, _utils).formatWithValidation(parsed);
+                            url = (0, _formatUrl).formatWithValidation(parsed);
                           }
                           route = (0,
                           _normalizeTrailingSlash).removePathTrailingSlash(
@@ -6572,6 +6581,8 @@
         value: true
       });
       exports.formatUrl = formatUrl;
+      exports.formatWithValidation = formatWithValidation;
+      exports.urlObjectKeys = void 0;
       var querystring = _interopRequireWildcard(__webpack_require__(466));
       function _interopRequireWildcard(obj) {
         if (obj && obj.__esModule) {
@@ -6641,6 +6652,26 @@
           .concat(pathname)
           .concat(search)
           .concat(hash);
+      }
+      var urlObjectKeys = [
+        "auth",
+        "hash",
+        "host",
+        "hostname",
+        "href",
+        "path",
+        "pathname",
+        "port",
+        "protocol",
+        "query",
+        "search",
+        "slashes"
+      ];
+      exports.urlObjectKeys = urlObjectKeys;
+      function formatWithValidation(url) {
+        if (false) {
+        }
+        return formatUrl(url);
       } //# sourceMappingURL=format-url.js.map
 
       /***/
@@ -7977,10 +8008,7 @@
       exports.isResSent = isResSent;
       exports.normalizeRepeatedSlashes = normalizeRepeatedSlashes;
       exports.loadGetInitialProps = loadGetInitialProps;
-      exports.formatWithValidation = formatWithValidation;
-      exports.HtmlContext = exports.ST = exports.SP = exports.urlObjectKeys = void 0;
-      var _react = __webpack_require__(7294);
-      var _formatUrl = __webpack_require__(4611);
+      exports.ST = exports.SP = void 0;
       function execOnce(fn) {
         var used = false;
         var result;
@@ -8115,26 +8143,6 @@
         );
         return _loadGetInitialProps.apply(this, arguments);
       }
-      var urlObjectKeys = [
-        "auth",
-        "hash",
-        "host",
-        "hostname",
-        "href",
-        "path",
-        "pathname",
-        "port",
-        "protocol",
-        "query",
-        "search",
-        "slashes"
-      ];
-      exports.urlObjectKeys = urlObjectKeys;
-      function formatWithValidation(url) {
-        if (false) {
-        }
-        return (0, _formatUrl).formatUrl(url);
-      }
       var SP = typeof performance !== "undefined";
       exports.SP = SP;
       var ST =
@@ -8151,11 +8159,7 @@
         }
         return DecodeError;
       })(_wrapNativeSuper(Error));
-      exports.DecodeError = DecodeError;
-      var HtmlContext = (0, _react).createContext(null);
-      exports.HtmlContext = HtmlContext;
-      if (false) {
-      } //# sourceMappingURL=utils.js.map
+      exports.DecodeError = DecodeError; //# sourceMappingURL=utils.js.map
 
       /***/
     },
Diff for index.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c5581a7a22133abc.js"
+      src="/_next/static/chunks/main-688a8db042e02e1b.js"
       defer=""
     ></script>
     <script
Diff for link.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c5581a7a22133abc.js"
+      src="/_next/static/chunks/main-688a8db042e02e1b.js"
       defer=""
     ></script>
     <script
Diff for withRouter.html
@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-c5581a7a22133abc.js"
+      src="/_next/static/chunks/main-688a8db042e02e1b.js"
       defer=""
     ></script>
     <script
Commit: fed3dbd

@kodiakhq kodiakhq bot merged commit eddabd9 into canary Feb 17, 2022
@kodiakhq kodiakhq bot deleted the chore/move-html-context branch February 17, 2022 18:21
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

_middleware breaking server in runtime
4 participants